<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<button id="openWindow">window.open('url')打开一个具有给定ulr的新窗口</button>

		<!--
    弹窗在移动设备上非常棘手，因为移动设备无法同时显示多个窗口。

    但任然有一些任务在使用弹窗，例如进行 OAuth 授权，因为：
    1. 弹窗是完全独立的窗口，具有自己的独立 JS 环境。因此，使用弹窗打开一个不信任的第三方网站是安全的。
    2. 弹窗可以导航（修改 url），并将消息发送到 opener 窗口（即打开弹窗的窗口）。

		如果主窗口和弹窗同源，那么它们可以彼此自由地读取和修改。否则，它们可以更改彼此的地址（location），交换消息。
    -->

		<script>
			const btn = document.querySelector('#openWindow')

			btn.addEventListener('click', function () {
				window.open('https://www.baidu.com')
			})
		</script>
	</body>
</html>
